<template>
  <transition name="fade">
    <div class="message" v-show="show">
      <i class="icon iconfont" :class="[iconClassName,type]"></i>
      <span class="text">{{text}}</span>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'message',
  props: {
    type: {
      type: String,
      default: 'info',
      validator: val => ['info', 'success', 'warning', 'error'].includes(val)
      // ['info', 'success', 'warning', 'error'] 表示type只接收这四个字符串作为参数传入message组件
    },
    text: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      iconObj: {
        info: 'icontubiao-28',
        success: 'icontubiao-53',
        warning: 'icontubiao-28',
        error: 'icontubiao-52'
      }
    }
  },
  computed: {
    iconClassName () {
      return this.iconObj[this.type]
    }
  }
}
</script>

<style scoped lang="stylus">
  .fade-enter,
  .fade-leave-active
    opacity: 0;
    transform: translate(-50%, -100%)!important;
  .message
    font-size 16px
    min-width: 380px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    background-color: #ffffff;
    transition: opacity .3s,transform .4s,top .4s;
    overflow: hidden;
    padding: 15px 15px 15px 20px;
    display: flex;
    align-items: center;
    z-index 99999999
    .icon
      margin-right 12px;
      &.info
        color $info
      &.success
        color $positive
      &.error
        color $negative
      &.warning
        color $warning
</style>
